import { useEffect, useState, useRef } from "react";
import { Space, Table, Image, Switch, Select, Input } from "antd";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import {
  getProductListInterface,
  updateProductListInterface,
  getCategoryListInterface,
  searchProductInterface,
} from "@/api/product";
import usePagination from "@/hooks/usePagination";
import { useSize } from "ahooks";
export default function Home() {
  const [dataSource, setDataSource] = useState([]);
  const pagination = usePagination();
  const flagRef = useRef(true);
  const [categoryList, setCategoryList] = useState([]);
  const [category, setCategory] = useState("");
  const { Search } = Input;
   const size = useSize(document.querySelector('body'));
  const getProductList = () => {
    getProductListInterface().then((res) => setDataSource(res?.data?.data));
  };
  useEffect(() => {
    getProductList();
    handleChangeCategory();
  }, []);
  // 监测是否翻页,对序号标识进行判断修改
  useEffect(() => {
    flagRef.current = true;
  }, [pagination]);
  // 是否秒杀
  const seckillChange = (checked, record) => {
    updateProductListInterface({
      proid: record.proid,
      type: "isseckill",
      flag: checked,
    }).then((res) => {
      getProductList();
      console.log(res);
    });
  };
  // 是否推荐
  const recommendChange = (checked, record) => {
    updateProductListInterface({
      proid: record.proid,
      type: "isrecommend",
      flag: checked,
    }).then(() => {
      getProductList();
    });
  };
  // 分类列表
  const handleChangeCategory = () => {
    getCategoryListInterface().then((res) =>{console.log(res.data.data); setCategoryList(res?.data?.data)});
  };
  // 搜索分类
  const onSearch = (search) => {
    searchProductInterface({ category, search }).then((res) => {
      // 将筛选后的数据更新dataSource
      setDataSource(res.data.data);
    });
  };
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      {/* FIXME 搜索功能UI */}
      <Space>
        <Select
          defaultValue={category}
          style={{ width: 120 }}
          onChange={(value) => setCategory(value)}
          options={[
            { value: "", label: "全部" },
            ...categoryList.map(item => {
              return { value: item, label: item };
            }),
          ]}
        />
        <Search
          placeholder="输入搜索内容"
          onSearch={onSearch}
          style={{ width: 200 }}
        />
      </Space>
      <Table
        dataSource={dataSource}
        rowKey={(record) => record.proid}
        pagination={pagination}
        scroll={{ y: size.height-400===0?400:size.height-400 }}
      >
        <Table.Column
          title="序号"
          render={(_, __, index) => {
            // 判断删除的是否为最后一页页最后一条数据
            dataSource?.length ===
              pagination.pageSize * (pagination.current - 1) &&
              (flagRef.current = false);
            return (
              pagination.pageSize *
                (flagRef.current
                  ? pagination.current - 1
                  : pagination.current - 2) +
              index +
              1
            );
          }}
        />
        <Table.Column
          title="图片"
          dataIndex="img4"
          render={(text) => {
            return <Image src={text} style={{ height: "100px" }} />;
          }}
        />
        <Table.Column title="商品价格" dataIndex="originprice" />
        <Table.Column title="商品名称" dataIndex="proname" />
        <Table.Column
          title="是否秒杀"
          dataIndex="isseckill"
          render={(text, record) => {
            return (
              <Switch
                onChange={(change) => seckillChange(change, record)}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked={text}
              />
            );
          }}
        />
        <Table.Column
          title="是否推荐"
          dataIndex="isrecommend"
          render={(text, record) => {
            return (
              <Switch
                onChange={(change) => recommendChange(change, record)}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked={text}
              />
            );
          }}
        />
      </Table>
    </Space>
  );
}
